2015-09-25

周精益分享-设计规范交流

Label的一些使用规范 - 杨志平

动态适应字体大小

iOS系统自带的常见字体样式（字号及粗细等等）

UIFontTextStyleHeadline

UIFontTextStyleSubheadline

UIFontTextStyleBody

UIFontTextStyleFootnote

UIFontTextStyleCaption1

UIFontTextStyleCaption2

效果如下：

Font

代码

// 字体初始化
UIFont *font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];

// 通知需要刷新的文本字体
    [[NSNotificationCenter defaultCenter]addObserver:self
                                           selector:@selector(userTextSizeDidChange)
                                               name:UIContentSizeCategoryDidChangeNotification
                                             object:nil];

国际化支持（适配注意点）

工具：genstrings

参考：博客链接

1
2
3

先看看它的宏定义：
#define NSLocalizedString(key, comment) 
[[NSBundle mainBundle] localizedStringForKey:(key) value:@"" table:nil]

本地化对象：标签和按钮上的文本，或者在运行时获取的字符串和数据动态生成的字符串。

难点

不同语言的语法问题

语序，人称不一致：
「Paul invited you」和「You invited Paul」 -> 「%@ invited %@」，看似可以
以德语为例，「Paul invited you」译为「Paul hat dich eingeladen」，
而「You invited Paul」则译为「Du hast Paul eingeladen」。
正确处理其他语言的特殊语法方案:「%@ invited you」和「You invited %@」。

一词多意

run -> 
	 vt. & vi. 跑
	 移动
	 (使)流动
	 n. 跑, 奔跑
	 旅行, 旅程
	 行驶路线
	 时期; 一段时间

正确做法：

1 2	NSLocalizedString(@"activity-profile.title.the-run", nil) NSLocalizedString(@"home.button.start-run", nil)

或者：(完全没有试过)

NSLocalizedString 有一些变体能够提供更多字符串本地化的操作方式。NSLocalizedStringFromTable 接收 key、table 和 comment 这三个参数，其中 table 参数表示该字符串对应的一个表格，genstrings 会为表中的每一个条目生成一个以条目名称（假设为 table-item）命名的独立字符串文件 table-item.strings。
这样你就可以把字符串文件分割成几个小一些的文件。在一个庞大的项目或者团队中工作时，这一点显得尤为重要。同时这也让合并原有的和重新生成的字符串文件变得容易一些。

1	NSLocalizedStringFromTable(@"home.button.start-run", @"ActivityTracker", @"some comment..")

调试本地化字符串（拓展）

应用支持的语言版本越多，确保所有元素都正确显示就越难。但是这里有一些默认的用户选项和工具可以减轻你的负担。

NSDoubleLocalizedStrings
AppleTextDirection
NSForceRightToLeftWritingDirection
选项保证你的布局不会因为长字符串或者从右往左读的语言而混乱。

NSShowNonLocalizedStrings
NSShowNonLocalizableStrings
则可以帮助你找到没有翻译的字符串和根本没有制定字符串本地化宏的字符串。

单位和度量 -吴明

Android基本单位规范 -吴明

单位和度量

像素密度
- 每英寸的像素数被称为“像素密度”。
- DPI =屏幕宽度（或高度）像素/屏幕宽度（或高度）英寸
- mdpi-160dpi,
  hdpi-480x800-240dpi,
  xhdpi-720x1280-320dpi,
  xxhdpi-1080x1920-480dpi
- mipmap-hdpi,
  drawable-hdpi区别:用mipmap会缩放图片并优化性能。
密度独立像素
- “密度独立”是指在屏幕上用不同的密度来统一的显示用户界面元素
- 1dp 和 160 dpi 屏幕的一个物理像素相等。计算 dp 的方法：
  dp =(宽度像素160)/ dpi**

可扩展像素（sp）

在为安卓系统开发程序时，可扩展的像素（SP）提供和DP一样的功能，但只是在字体上。一个 SP 的默认值和 DP 上的默认值一样。
density==scaledDensity,即1sp=1dp，

还是采用dp替代sp,为什么

	public static float applyDimension(int unit, float value,DisplayMetrics metrics)
{
    switch (unit) {
    case COMPLEX_UNIT_PX:
        return value;
    case COMPLEX_UNIT_DIP:
        return value * metrics.density;
    case COMPLEX_UNIT_SP:
        return value * metrics.scaledDensity;
    case COMPLEX_UNIT_PT:
        return value * metrics.xdpi * (1.0f/72);
    case COMPLEX_UNIT_IN:
        return value * metrics.xdpi;
    case COMPLEX_UNIT_MM:
        return value * metrics.xdpi * (1.0f/25.4f);
    }
    return 0;
}

pt(磅)，标准的长度单位，1pt＝1/72英寸，用于印刷业,买蛋糕的时候挺说最多
em,em指字体高,1em=16px,任意浏览器的默认字体高都是16px.

字体排版

字体排版的缩放和基本样式
- 同时使用过多的字体尺寸和样式可以很轻易的毁掉布局,最基本的样式集合就是基于 12、14、16、20 和 34 号的字体排版缩放,以下Google建议字体尺寸:
基本色/色彩对比度
- 最基本的常识是，相同颜色的背景和文字是很难阅读的。但有些人不知道的是，带有过强对比度的文本会有些炫目，同样难以阅读。
- 文本应当满足对比度7:1的是最适合阅读,最低的对比度4.5:1(依据明度计算),
- Google对比度建议:
行高
- 只有“主体”、“次要标题”、“大纲”等类似的样式中才允许使用自动换行。其它所有样式应当以单行形式出现。
- For all styles, line height is 0.1em larger than the English-like languages. English and English-like languages mostly use a portion of the em box, often the lower portion below the x-height. Chinese, Japanese, and Korean (CJK) ideographic characters use the entire em box. Characters in tall languages often have long descenders and/or ascenders. To achieve the same design intention as English for CJK and to avoid potential text clipping between two lines next to each other for tall languages, the line height needs to be larger than in English for tall and dense languages.
换行规则/连字符
- 正确：
- 错误
每行字符
- 每行应当保持在50-60个字符左右
- 太长,用户的眼睛将难以找到在文本上对焦。这是因为过长的文字导致用户难以判断一行的起始点，甚至在大段文字中出现读错行的现象
- 太短，会导致眼睛来回扫视过于频繁，破坏阅读的节奏。过短的内容还会给人压力，导致用户完成本行阅读前过早跳转到下一行阅读(因此会错过潜在的重要信息)
字间距

设计规范之我见 - 张超耀

设计规范阅读心得 - 潘君

官方设计文档

参考资料：[ISUX转译]iOS 8人机界面指南（一）：UI设计基础

突出内容
统一
为变化做好准备
- 压缩
- 拉伸
充足的互动空间
路径合理
注意层级
使用标准的手势
页面切换过渡需要有焦点
反馈要准确

案例

参考资料：向用户征询iOS授权的五种常见设计模式

设计规范之奇妙的Z轴- 王进

Z轴组成：

z=elevation+translationZ;

eleavation是静态的成员，静止高度，是不会变化的。当一个对象的高度产生变化时，它将会尽快恢复到自身的静止高度。

translationZ是用来做动画。动态高度偏移

在layout中使用 android:elevation属性去定义

在代码中使用 View.setElevation 方法去定义

在layout中使用 android:translationz属性去定义设置视图的translation，可以使用View.setTranslationZ方法
新的属性值：translationZ允许你创建一个动画暂时的反应出View的高度值（elevation）变化。

这对于响应触摸手势很有用处:


int action = motionEvent.getActionMasked();  

                /* Raise view on ACTION_DOWN and lower it on ACTION_UP. */  

                switch (action) {  

                    case MotionEvent.ACTION_DOWN:  

                        Log.d(TAG, "ACTION_DOWN on view.");  

                        view.setTranslationZ(120);  

                        break;  

                    case MotionEvent.ACTION_UP:  

                        Log.d(TAG, "ACTION_UP on view.");  

                        view.setTranslationZ(0);  

                        break;  

                    default:  

                        return false;  

                }

系统高度参考

高度特性：

“高度”的度量单位与 XY 轴的度量单位相同，主要是 DP。由于所有 Material 元素都具有 1 单位 DP 的厚度，所以“高度”度量的是从一个平面顶部到另一个平面顶部的距离。
一个子对象的高度与其父对象的高度相关

阴影

“阴影”提供了对象深度和方向性移动的重要视觉线索。它们是唯一一种标示不同平面之间分离程度的视觉线索。某一对象的“高度”决定了其具体“阴影”的表现形式。

Z 轴影响阴影效果

z轴越大，阴影越明显，

Z轴影响View 的绘制顺序：

在同一个父view内部，z轴越小，绘制越早，z轴后绘制的会覆盖先前绘制的，只有Z轴相同，才按照添加循序绘制

Z轴属性会扩大view的显示区域，如果他的大小≥父控件大小，他的阴影效果就无法显示


<TextView

          android:layout_marginTop="20dp"

          android:layout_marginBottom="20dp"

          android:gravity="center"

          android:text="2dp"

          android:textColor="#88000000"

          android:layout_width="150dp"

          android:layout_height="100dp"

          android:elevation="2dp"

          android:background="#ffffff"/>



  <TextView

          android:layout_marginTop="20dp"

          android:layout_marginBottom="20dp"

          android:layout_marginLeft="20dp"

          android:gravity="center"

          android:text="4dp"

          android:textColor="#88000000"

          android:layout_width="150dp"

          android:layout_height="100dp"

          android:elevation="4dp"

          android:background="#ffffff"/>

使用直接使用图片（除非shape)，设置z轴，阴影效果不会显示，必须通过代码viewOutlineProvider指明轮廓
- 在layout中使用android：outlineProvider属性
none 即使设置里z轴也不会显示阴影

background 按照background 设置背景

bounds 按照view 大小设置背景

paddedbounds 与bounds 类似，不过背景向右偏些

代码设置


ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {  

    @Override  

    public void getOutline(View view, Outline outline)  

        //可以指定圆形，矩形，圆角矩形，path

        outline.setOval(0, 0, view.getWidth(), view.getHeight());  

    }  

};  

fab.setOutlineProvider(viewOutlineProvider);?

两层阴影

这两层阴影, 一层是环境光投射的阴影, 另一层是关键光照射在 material 上投射的阴影.这两种光线叠加在一起, 才能构成 material design 中的阴影.
而理论上, 这两种阴影都应该是有平滑曲线的, 但是由于手机处理器性能问题, 实时计算平滑后的阴影会导致可怕的耗电与发热, 所以 Google 只能在这方面妥协, 将阴影曲线拉直, 直接导致某些阴影效果变差.通过叠加可以模拟真实的曲线阴影。

链接：http://www.zhihu.com/question/28865209/answer/42749018